---
title: 十字高亮
icon: Cross
---

<MetaData
  lang="zh-CN"
  meta={{
    plugins: [{
      client: '@univerjs/sheets-crosshair-highlight',
      facade: '@univerjs/sheets-crosshair-highlight/facade',
      locale: '@univerjs/sheets-crosshair-highlight/locale/zh-CN',
      style: '@univerjs/sheets-crosshair-highlight/lib/index.css',
    }],
    server: '否',
  }}
/>

十字高亮将用户选中的单元格所在行列突出显示，以便用户更容易地识别当前选中的单元格。

<PlaygroundFrame lang="zh-CN" slug="sheets/crosshair-highlighting" clickToShow />

## 预设模式

十字高亮并未提供预设模式，但支持与其插件混用。

```package-install
npm install @univerjs/watermark
```

### 使用

```typescript
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight' // [!code ++]

import '@univerjs/sheets-crosshair-highlight/facade' // [!code ++]

import '@univerjs/sheets-crosshair-highlight/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      UniverPresetSheetsCoreZhCN,
      SheetsCrosshairHighlightZhCN, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin, // [!code ++]
  ],
})
```

## 插件模式

### 安装

```package-install
npm install @univerjs/sheets-crosshair-highlight
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'
import SheetsCrosshairHighlightZhCN from '@univerjs/sheets-crosshair-highlight/locale/zh-CN'

import '@univerjs/sheets-crosshair-highlight/lib/index.css'

import '@univerjs/sheets-crosshair-highlight/facade'

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      SheetsCrosshairHighlightZhCN, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin) // [!code ++]
```

## Facade API

完整 Facade API 类型定义，请查看 [FacadeAPI](https://reference.univer.ai/zh-CN)

### 切换十字高亮开关

```typescript
univerAPI.setCrosshairHighlightEnabled(true)

univerAPI.setCrosshairHighlightEnabled(false)
```

### 获取十字高亮开关状态

```typescript
univerAPI.getCrosshairHighlightEnabled()
```

### 设置十字高亮颜色

```typescript
univerAPI.setCrosshairHighlightColor('red')
```

### 获取十字高亮颜色

```typescript
univerAPI.getCrosshairHighlightColor()
```

### 事件监听

完整事件类型定义，请查看 [Events](https://reference.univer.ai/zh-CN/classes/FEventName)。

`CrosshairHighlightEnabledChanged` 事件将在十字高亮开关状态发生变化时触发。

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {
  const { enabled, workbook, worksheet } = params
})

// 移除事件监听器，使用 `disposable.dispose()`
```

`CrosshairHighlightColorChanged` 事件将在十字高亮颜色发生变化时触发。

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {
  const { color, workbook, worksheet } = params
})

// 移除事件监听器，使用 `disposable.dispose()`
```
